<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script type="text/javascript" src="jquery-1.9.1.min.js"></script>
<link href="index.css" rel="stylesheet" type="text/css">
</head>
<body>
<section>

<div class="id">菜单一<span> <img src="jiantou.jpg"> </span></div>
<ul>
<li>导航一</li>
<li>导航二</li>
</ul>

<div class="id">菜单二<span> <img src="jiantou.jpg"> </span></div>
<ul>
<li>导航一</li>
<li>导航二</li>
</ul>

<div class="id">菜单三<span> <img src="jiantou.jpg"> </span></div>
<ul>
<li>导航一</li>
<li>导航二</li>
</ul>

</section>
<script type="text/javascript">
$('section>div').click(function(){
	$(this).children().toggleClass('cs');
	$(this).next('ul').slideToggle(300);
	$(this).siblings('.id').children().removeClass('cs');
	$(this).siblings('.id').next('ul').slideUp(300);	
})
</script>
</body>
</html>
